<template>
	<div>
		<detail-banner :sightName = "sightName" :bannerImg = "bannerImg" :gallaryImgs = "gallaryImgs"></detail-banner>
		<detail-header></detail-header>
		<detail-list :list = "categoryList"></detail-list>
		<weekend :weekendList = "weekendList"></weekend>
	</div>
</template>

<script>
	import detailBanner from './components/banner.vue'
	import detailHeader from './components/header.vue'
	import detailList   from './components/list.vue'
	import weekend   from '../Home/components/weekend.vue'
	import axios from 'axios'
	export default {
		name : 'detail',
		components : {
			detailBanner,
			detailHeader,
			detailList,
			weekend
		},
		data () {
			return {
				sightName:"",
				bannerImg:"",
				gallaryImgs:[],
				categoryList:[],
				weekendList:[]
			}
		},
		methods : {
			getDetailInfo () {
				axios.get("/api/detail.json",{
					params  : {
						id : this.$route.params.id
					}
				}).then(this.getDetailInfoSucc)
			},
			getDetailInfoSucc (res) {
				if(res.data.ret && res.data.data) {
					const data = res.data.data;
					this.sightName = data.sightName;
					this.bannerImg = data.bannerImg;
					this.gallaryImgs = data.gallaryImgs;
					this.categoryList = data.categoryList;
				}
			},

			getIndexInfo(){
				axios.get('/api/index.json?city=' + this.city)
				.then(this.getIndexInfoSucc);
			},
			getIndexInfoSucc (res){
				if(res.data.ret && res.data.data) {
					const data = res.data.data;
					this.weekendList = data.weekendList;
				}
			}
		},
		mounted () {
			this.getDetailInfo();
			this.getIndexInfo();
		}
	}
</script>

<style lang = "less" scoped>
	
</style>